@charset "UTF-8";
@import "reset";

//共用属性
@mixin content{
            width: 145px;
            height: 125px;
            padding: 0px 9px;
            border: 8px solid rgb(218,223,231);     
            background-repeat: no-repeat;
            background-size: 41px;   
            >p:first-child{
                font-size: 14px;
                margin-top: 11px;
            }
            >p:nth-child(2){
                font-size: 11px;
                width: 66px;
                margin-top: 11px;
            }    
}


//外部容器
.container{
    width: 327px;
    height: 284px;
    margin: 0 auto;
    margin-top: 100px;
    padding-top: 10px;
    //主要内容
    >.content{
        width: 305px;
        height: 267px;
        margin: 0 auto;
        >li{
            @include content;
            background-image: url(../img/one.png);  
            background-position-x: 77px;
            background-position-y: 64px;                       
        } 
        >li:nth-child(2){
            margin-left: 15px;
            background-image: url(../img/two.png); 
            background-position-x: 77px;
            background-position-y: 64px;                        
        }
        >li:nth-child(3){
            margin-top: 17px;   
            background-image: url(../img/three.png); 
            background-position-x: 77px;
            background-position-y: 57px;            
            >p:nth-child(2){
                margin-top: 7px;
            }
        } 
        >li:nth-child(4){
            background-image: url(../img/four.png);  
            background-position-x: 77px;
            background-position-y: 64px;                       
            margin-top: 17px;
            margin-left: 15px;
        } 
    }
}
